<template>
  <div id="constructionPlanManagement">
    <el-container>
      <el-header class="constructionPlanManagementHeader"> </el-header>
      <el-main class="constructionPlanManagementMain">
        <div class="">
          <el-menu
            default-active="1"
            class="el-menu-vertical-constructionPlanManagement"
            @select="selectleOpen"
            @close="handleClose"
            mode="horizontal"
          >
            <el-menu-item index="1">
              <template slot="title">
                <i class="el-icon-s-home"></i>
                <span>计划概览</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-message"></i>
              <span slot="title">月计划</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-data-analysis"></i>
              <span slot="title">周计划</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-place"></i>
              <span slot="title">编辑计划</span>
            </el-menu-item>
          </el-menu>

     
          <overview class="constructionTable" v-if="key == 1"></overview>

          <!-- 月计划 -->
          <monthlyPlan class="constructionTable" v-if="key == 2"></monthlyPlan>
          <!-- 周计划 -->
          <weeklyPlan class="constructionTable" v-if="key == 3"></weeklyPlan>
          <!-- 项目橄榄-->
          <!-- 计划请点 -->
          <!-- <plannedInventory v-if="key == 4"></plannedInventory> -->
          <!-- 计划销点 -->
          <!-- <plannedSalesPoints v-if="key == 5"></plannedSalesPoints> -->
          <!-- 临时计划 -->
          <!-- <temporaryPlan v-if="key == 6"></temporaryPlan> -->
          <!-- </div> -->
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// // 概览
import overview from "./overview/overview.vue";
// // 周计划
import weeklyPlan from "./weeklyPlan/weeklyPlan.vue";
// // 月计划
import monthlyPlan from "./monthlyPlan/monthlyPlan.vue";
// // 计划销点
// import plannedSalesPoints from "./plannedSalesPoints/index.vue";
// // 计划请点
// import plannedInventory from "./plannedInventory/plannedInventory.vue";
// // 临时计划
// import temporaryPlan from "./temporaryPlan/index.vue";

export default {
  data() {
    return {
      key: 1,
      inTellingId: "",
    };
  },
  components: {
    overview,
    weeklyPlan,
    monthlyPlan,
    // projectManagementItem,
    // plannedInventory,
    // plannedSalesPoints,
    // temporaryPlan,
  },
  created() {
    this.inTellingId = this.$store.state.setinTellingId;
    console.log(this.inTellingId);
  },
  methods: {
    selectleOpen(key, keyPath) {
      console.log(key, keyPath);
      this.key = key;
    },
    handleClose(key, keyPath) {
      this.key = key;
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="less" scoped>
#constructionPlanManagement {
  height: 100%;
  display: flex;
  width: 100%;
  background-color: #eeeeee;
  :deep(.el-textarea__inner) {
    // pointer-events: none;
    border: none;
    background-color: rgba(255, 255, 255, 0);
    resize: none;
  }
  .constructionPlanManagementHeader {
    height: 1rem !important;
  }
  .constructionPlanManagementMain {
    padding-top: 0;
  }
  .formTable {
    background-color: #409eff;
    color: white;
  }
  .constructionTable {
    width: 100%;
  }
}
.el-menu-vertical-constructionPlanManagement {
  width: 100%;
  height: 5rem;
}
.constructionPlanContent {
  width: 100%;
  position: relative;
}
</style>
<style lang="less">
#constructionPlanManagement {
  .constructionTable {
   
  }
}
</style>
